<template>
    <div class="header">
        <van-nav-bar :title="title" left-arrow @click-left="handleLeft" />
    </div>
    <div class="secondmentGoodsDetails" :style="{ paddingBottom: type != 'history' ? '25.066667vw' : '' }">
        <div class="secondmentGoodsDetails_header">
            <div class="header">借调详情</div>
            <div class="content">
                <div class="content_item">
                    <div class="label">{{ title === '记录详情' ? '出借方：' : '借品方：' }}</div>
                    <div class="value">{{ title === '记录详情' ? datas?.auditName : datas?.loanName }}</div>
                </div>
                <div class="content_item">
                    <div class="label">发起时间：</div>
                    <div class="value">{{ datas?.loanTime }}</div>
                </div>
                <div class="content_item">
                    <div class="label">借品附言：</div>
                    <div class="value">{{ datas?.loanRemark ? datas?.loanRemark : '没有附言' }}</div>
                </div>
            </div>
        </div>
        <div class="secondmentGoodsDetails_center">
            <div class="header">
                <van-image :src="icon_shou"></van-image>
                借调详情
            </div>
        </div>
        <div class="secondmentGoodsDetails_bottom">
            <div class="content">
                <div class="content_left">
                    <van-image
                        :src="datas?.stockOutLoanVo.productImage ? datas?.stockOutLoanVo.productImage + '?x-oss-process=image/resize,w_300' : ''"
                        class="van-image" @click="enlargeImages(datas?.stockOutLoanVo.productImage)">
                        <template v-slot:error>加载失败</template>
                        <div class="liveStreamingMechanisms"
                            v-if="datas?.stockOutLoanVo.mechanismList[1]?.cooperationMode">多机制</div>
                    </van-image>
                </div>
                <div class="content_right" @click="routerGo(datas?.stockOutLoanVo?.type, datas.productId)">
                    <div class="div_right_top">
                        <div class="style_name">
                            <van-text-ellipsis :content="datas?.stockOutLoanVo.productName" />
                        </div>
                        <div class="stats">{{ datas?.stockOutLoanVo.type == 1 ? '研发品' : '招商品' }}</div>
                    </div>
                    <div class="div_right_center">
                        <van-text-ellipsis rows="2" :content="datas?.stockOutLoanVo.sellingPoints" />
                    </div>
                    <div class="list_top_right_money">
                        <div class="money_left" v-if="datas?.stockOutLoanVo.mechanismList[0].cooperationMode === '分佣'">
                            ￥<span>{{ datas?.stockOutLoanVo.mechanismList[0].price }}</span>
                        </div>
                        <div class="money_left" v-else>
                            ￥<span>{{ datas?.stockOutLoanVo.mechanismList[0].costPrice }}</span>
                        </div>
                        <div v-if="datas?.stockOutLoanVo.mechanismList[0].cooperationMode === '分佣'" class="commission">
                            <div class="fonts">佣</div>
                            <div class="numbers">{{ datas?.stockOutLoanVo.mechanismList[0].commission }}%</div>
                        </div>
                        <div class="money_right">
                            {{ datas?.stockOutLoanVo.mechanismList[0].liveStreamingMechanism }}
                        </div>
                    </div>
                    <div class="list_top_right_bottom">
                        {{ datas?.stockOutLoanVo.stockCode }}
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom_item">
                    <div class="label">选品时间：</div>
                    <div class="value">{{ datas?.stockOutLoanVo.stockOutTime }}</div>
                </div>
                <div class="bottom_item">
                    <div class="label">持有天数：</div>
                    <div class="value">{{ datas?.stockOutLoanVo.days || 0 }}天</div>
                </div>
                <div class="bottom_item">
                    <div class="label">选品数量：</div>
                    <div class="value">{{ datas?.stockOutLoanVo.outNum }}</div>
                </div>
                <div class="bottom_item" v-if="type == 'status'">
                    <div class="label">审核状态：</div>
                    <div :class="`value ${statusName(datas?.status)[1]}`">{{ statusName(datas?.status)[0] }}</div>
                </div>
                <div class="bottom_item" v-if="type == 'status'">
                    <div class="label">审核附言：</div>
                    <div class="value">{{ datas?.auditRemark ? datas?.auditRemark : '无' }}</div>
                </div>
            </div>
        </div>
        <van-dialog v-model:show="dialogShow" :showConfirmButton="false">
            <div class="dialog_top">
                <van-image :src="icon_erciqueren"></van-image>
                <div class="title">二次确认</div>
                <div class="describe">
                    确认{{ dialogDescribe }}「{{ datas?.loanName }}」的借品申请吗？
                </div>
            </div>
            <div class="postscript">
                <div class="title">附言</div>
                <van-form @submit="onSubmit">
                    <van-field maxlength="50" show-word-limit v-model="message" rows="5" label="" type="textarea"
                        placeholder="请输入" :border="false" @input="(e) => { forbidRule(e, 'emoji') }"
                        :rules="[{ required: false, trigger: 'onBlur', message: '请输入' }]" />
                    <div class="buttons">
                        <div class="cancel" @click="cancel">取消</div>
                        <van-button class="button" :loading="loading" loading-text="执行中..." round block type="primary"
                            native-type="submit" v-throttle:click>
                            提交确认
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-dialog>
    </div>
    <div class="footer" v-if="type == 'none' && datas?.status === 0 && look !== 'look'">
        <div class="refuse" @click="refuse">拒绝</div>
        <div class="agree" @click="agree">同意</div>
    </div>
    <div class="footer" v-if="type == 'status' && datas?.status === 0 && look !== 'look'">
        <div class="revoke" @click="repeal">撤销</div>
    </div>
    <div class="footer_fixed" v-if="type == 'status' && datas?.status === 2">已于{{ datas?.expiresTime }}时间归还到产品部</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getLoanDetail, loanRepeal, refuseLoan, passLoan } from '@/api/operation/index'
import { showFailToast, showImagePreview, showSuccessToast } from 'vant';
import { getEnvValue } from "@/utils/index";
const icon_shou = new URL("@/assets/operation/icon_shou.png", import.meta.url).href;
const icon_erciqueren = new URL("@/assets/operation/icon_erciqueren.png", import.meta.url).href;
const route = useRoute();
const loading = ref(false)
const router = useRouter();
/** 借调id */
const id: any = computed(() => {
    return route.query.id;
});
// 模块名称
const title: any = computed(() => {
    return route.query.title;
});
/** 
 * 上级路由
 * @type status 显示审批类型
 * @type none 不显示审批类型
  */
const type: any = computed(() => {
    return route.query.type;
});
// 通知中心跳转过来传递的查看参数，查看不能展示按钮
const look: any = computed(() => {
    return route?.query?.look;
});

// 确认弹窗
const dialogShow = ref(false)
// 确认弹窗提示语
const dialogDescribe = ref()
// 附言
const message = ref('')
// 详情
const datas = ref<any>()

// 输入事件、禁用规则
const forbidRule = (e: any, type: string) => {
    // 输入法表情默认不能输入
    if (type == 'emoji') {
        // emoji：输入时禁用输入法表情
        message.value = e.target.value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    } else if (type == 'blank') {
        // blank：输入时禁用空格
        message.value = e.target.value.replace(/\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    }
}
/** 跳转详情 */
const routerGo = (type: any, id: string) => {
    if (type == 1) {
        router.push({
            path: `/researchBasicsDetail/${id}`
        })
    } else {
        router.push({
            path: `/operationBasicsDetail/${id}`
        })
    }
}
/** 回退 */
const handleLeft = () => {
    router.back()
}

/** 获取借调详情 */
const getDetail = async () => {
    const res = await getLoanDetail({ id: id.value })
    if (res.data.stockOutLoanVo.productImage) {
        res.data.stockOutLoanVo.productImage = getEnvValue("VITE_APP_PIC_URL") + res.data.stockOutLoanVo.productImage.split(",")[0]
    }
    datas.value = res.data;
}
getDetail()

/** 图片放大 */
const enlargeImages = (img: string) => {
    if (img) {
        showImagePreview({
            images: [img],
        });
    }
};
const statusName = (status) => {
    if (status === 0) {
        return ['待处理', 'status_lan']
    } else if (status === 1) {
        return ['已撤销', 'status_hui']
    } else if (status === 2) {
        return ['已过期', 'status_hong']
    } else if (status === 3) {
        return ['已同意', 'status_lv']
    } else if (status === 4) {
        return ['已拒绝', 'status_hong']
    } else {
        return ['未知', 'status_node']
    }
}
/** 拒绝 */
const refuse = () => {
    dialogShow.value = true
    dialogDescribe.value = '拒绝'
}
/** 同意 */
const agree = () => {
    dialogShow.value = true
    dialogDescribe.value = '同意'
}
/** 二次确认同意 */
const onSubmit = async () => {
    loading.value = true
    try {
        if (dialogDescribe.value === '同意') {
            await passLoan({ id: datas?.value.id, auditRemark: message.value })
            CallBack('已同意')
            loading.value = false
        } else {
            await refuseLoan({ id: datas?.value.id, auditRemark: message.value })
            CallBack('已拒绝')
            loading.value = false
        }
    } catch (error) {
        if (error == 'timeout') {
            showFailToast('失败');
        }
        loading.value = false
    }

}
/** 取消 */
const cancel = () => {
    dialogShow.value = false
    message.value = ''
}
// 撤销操作
const repeal = async () => {
    await loanRepeal({ id: datas?.value?.id })
    CallBack('撤销成功')
}

const CallBack = (msg: string) => {
    showSuccessToast(msg)
    handleLeft()
}



</script>
<style lang="less" scoped>
.header {
    background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
    filter: blur(0px);
    height: 90px;
    padding-top: 44px;
    box-sizing: border-box;

    :deep(.van-icon-arrow-left) {
        color: #1a1b1c !important;
    }

    :deep(.van-nav-bar) {
        background: none !important;
    }

    :deep(.van-nav-bar__content) {
        background-color: transparent !important;
    }
}

.secondmentGoodsDetails {
    width: 100%;
    height: calc(100vh - 90px);
    background-color: #f6faff;
    box-sizing: border-box;
    padding: 10px 15px;
    overflow: auto;
    // padding-bottom: 94px;

    .secondmentGoodsDetails_header {
        width: 100%;

        .header {
            width: 100%;
            height: 38px;
            background: linear-gradient(270deg, #FFFFFF 0%, #EBF4FF 100%);
            border-radius: 5px 5px 0px 0px;
            box-sizing: border-box;
            padding: 0 15px;
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            line-height: 38px;
        }

        .content {
            width: 100%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 15px 15px 0 15px;

            .content_item {
                width: 100%;
                padding-bottom: 15px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;

                .label {
                    width: 70px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                    text-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.5);
                    text-align: left;
                }

                .value {
                    flex: 1;
                    min-width: 0;
                    word-break: break-all;
                    text-align: right;
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                }
            }
        }
    }

    .secondmentGoodsDetails_center {
        width: 100%;

        .header {
            width: 100%;
            height: 46px;
            line-height: 46px;
            background: url('@/assets/operation/icon_jiediaoshangpinbeijing.png');
            background-size: 100% 100%;
            font-weight: 600;
            font-size: 16px;
            color: #0094FF;
            padding: 0 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;

            .van-image {
                width: 15px;
                height: 15px;
                margin-right: 5px;
            }
        }
    }

    .secondmentGoodsDetails_bottom {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0;
        background-color: #fff;


        .content {
            display: flex;
            width: 100%;
        }

        .content_left {
            width: 120px;
            height: 120px;
            position: relative;

            .van-image {
                width: 120px;
                height: 120px;
            }

            .liveStreamingMechanisms {
                width: 46px;
                height: 22px;
                border-radius: 5px 0px 5px 0px;
                background: #0094FF;
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;
                line-height: 22px;
                text-align: center;
                display: inline-block;
                position: absolute;
                top: 0;
                left: 0;
            }
        }

        .content_right {
            width: calc(100% - 120px);
            height: 120px;
            box-sizing: border-box;
            padding-left: 10px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

            .div_right_top {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .style_name {
                    font-weight: 500;
                    font-size: 16px;
                    color: #1A1B1C;
                    width: 150px;
                    display: -webkit-box;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }

                .stats {
                    width: 56px;
                    height: 22px;
                    background: #EBF4FF;
                    border-radius: 2px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #0094FF;
                    text-align: center;
                    line-height: 22px;
                }
            }

            .div_right_center {
                width: 100%;
                font-weight: 400;
                font-size: 12px;
                color: #8492AD;
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

            .list_top_right_money {
                display: flex;
                align-items: center;
                width: 100%;

                .money_left {
                    font-weight: 500;
                    font-size: 12px;
                    color: #FC2540;
                    display: flex;
                    align-items: center;
                    margin-right: 10px;

                    span {
                        font-size: 18px;
                    }
                }

                .commission {
                    display: flex;
                    align-items: center;
                    border-radius: 2px;
                    overflow: hidden;
                    background: linear-gradient(136deg, #E9D1A5 0%, #CEA46C 100%);

                    .fonts {
                        padding: 0 5px;
                        box-sizing: border-box;
                        height: 16px;
                        background: #1B1714;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-weight: 400;
                        font-size: 12px;
                        color: #CEA46C;
                    }

                    .numbers {
                        height: 16px;
                        padding: 0 5px;
                        box-sizing: border-box;
                        font-weight: 500;
                        font-size: 12px;
                        color: #1B1714;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }

                .money_right {
                    max-width: 50px;
                    border-radius: 2px;
                    border: 1px solid #FF5A1A;
                    font-weight: 400;
                    font-size: 10px;
                    color: #FF5A1A;
                    height: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-left: 10px;
                    padding: 0 3px;
                    box-sizing: border-box;
                }
            }

            .list_top_right_bottom {
                width: 100%;
                font-weight: 400;
                font-size: 12px;
                color: #8492AD;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }


        }

        .bottom {
            margin: 20px 10px 0 10px;
            box-sizing: border-box;
            padding: 20px 15px 0px;
            background: linear-gradient(#FBFCFE 0%, #EFF6FF 100%);
            border-radius: 10px;

            .bottom_item {
                padding-bottom: 20px;
                width: 100%;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;

                .label {
                    width: 70px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                }

                .value {
                    width: calc(100% - 100px);
                    display: flex;
                    justify-content: flex-end;
                    font-weight: 400;
                    font-size: 14px;
                    color: #8492AD;
                    word-break: break-all;
                }

                .status_lan {
                    color: #0094FF;
                }

                .status_lv {
                    color: #19D11B;
                }

                .status_hong {
                    color: #FC2540;
                }

                .status_hui {
                    color: #8492AD;
                }

                .status_node {
                    display: none;
                }
            }
        }
    }

}

.footer {
    width: 100%;
    height: 84px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
    position: fixed;
    bottom: 0;
    display: flex;
    box-sizing: border-box;
    padding: 0 15px;
    justify-content: space-between;
    align-items: center;

    .refuse {
        width: 162px;
        height: 44px;
        background: #FC2540;
        border-radius: 23px;
        text-align: center;
        line-height: 44px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }

    .agree {
        width: 162px;
        height: 44px;
        background: #0094FF;
        border-radius: 23px;
        text-align: center;
        line-height: 44px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }

    .revoke {
        width: 345px;
        height: 44px;
        background: #0094FF;
        border-radius: 23px;
        text-align: center;
        line-height: 44px;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }
}

.footer_fixed {
    width: 100%;
    height: 28px;
    background: #EBF4FF;
    text-align: center;
    line-height: 28px;
    position: fixed;
    bottom: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #0094FF;
}

:deep(.van-popup) {
    height: 427px;

    .dialog_top {
        width: 100%;
        height: 185px;
        background: url('@/assets/operation/icon_erciquerenbeijing.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;

        .van-image {
            width: 70px;
            height: 70px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-top: 20px;
            padding: 0 10px;
            box-sizing: border-box;
        }

    }

    .postscript {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;

        .title {
            font-weight: 500;
            font-size: 14px;
            color: #1A1B1C;
            margin-bottom: 10px;
        }

        .buttons {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            bottom: 10px;
            width: calc(100% - 20px);
            box-sizing: border-box;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .button {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                background: #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }
    }
}

:deep(.van-cell) {
    padding: 0 !important;
}

:deep(.van-field__control) {
    background: #F6FAFF !important;
    border-radius: 5px;
}

:deep(.van-field__error-message) {
    position: absolute !important;
    bottom: 0px;
}

:deep(.van-field__word-limit) {
    font-weight: 400;
    font-size: 12px !important;
    color: #8492AD !important;
}
</style>